<template>
  <el-form
    style="padding-top: 20px"
    :model="models"
    :rules="rules"
    ref="form1"
    label-width="150px"
    class="demo-ruleForm"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="名称：" prop="model.name">
          <el-input v-model="models.model.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="编码：" prop="model.code">
          <el-input v-model="models.model.code"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <div slot="header">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col>
                <span style="font-weight: 900;">规则</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" justify="end">
              <el-col :span="15">
                <el-button-group>
                  <el-button icon="el-icon-plus" @click="addRow"></el-button>
                  <el-button icon="el-icon-delete" @click="remove"></el-button>
                  <el-button icon="el-icon-top" @click="up"></el-button>
                  <el-button icon="el-icon-bottom" @click="down"></el-button>
                </el-button-group>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-table
            :key="timeStamp"
            ref="singleTable"
            :data="tableData"
            @row-click="pitchOn"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="规则类型">
              <template slot-scope="scope">
                <el-select @change="onSelectChange" v-model="scope.row.ruleType" placeholder="请选择">
                  <el-option
                    v-for="item in ruleTypes"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                    <span style="float: left">{{ item.value}}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="分割符">
              <template slot-scope="scope">
                <el-select @change="onSelectChange" v-model="scope.row.separator" placeholder="请选择">
                  <el-option
                    v-for="item in separators"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </el-card>

    <el-row style="padding-top: 20px;">
      <el-col :span="22">
        <el-form-item label="规则：" prop="model.rule">
          <el-input v-model="models.model.rule"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <p style="color: red">以下几个序号的属性仅对于{NO}规则有效</p>
    <el-row>
      <el-col :span="22">
        <el-form-item label="序号生成方式：" prop="model.resetType">
          <el-radio-group v-model="models.model.resetType">
            <el-radio
              v-for="resetType in controlData.resetTypes"
              :label="resetType.value"
              :key="resetType.value"
            >{{resetType.key}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="序号长度：" prop="model.length">
          <el-input v-model="models.model.length"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="序号初始值：" prop="model.initValue">
          <el-input v-model="models.model.initValue"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="序号步长：" prop="model.step">
          <el-input v-model="models.model.step"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="备注：" prop="model.memo">
          <el-input
            type="textarea"
            v-model="models.model.memo"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="保留字段1：" prop="model.reserved1">
          <el-input v-model="models.model.reserved1"></el-input>
        </el-form-item>
        <el-form-item label="保留字段2：" prop="model.reserved2">
          <el-input v-model="models.model.reserved2"></el-input>
        </el-form-item>
        <el-form-item label="保留字段3：" prop="model.reserved3">
          <el-input v-model="models.model.reserved3"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import _ from "lodash";
export default {
  name: "smart-value-strategy-create",
  props: {
    models: Object,
    controlData: Object,
  },
  data() {
    return {
      timeStamp: "",
      ruleTypes: [
        {
          value: "{yyyy}",
          label: "年(如2021)",
        },
        {
          value: "{MM}",
          label: "月(如01)",
        },
        {
          value: "{dd}",
          label: "日(如03)",
        },
        {
          value: "{HH}",
          label: "时(如05)",
        },
        {
          value: "{mm}",
          label: "分(如05)",
        },
        {
          value: "{ss}",
          label: "秒(如09)",
        },
        {
          value: "{sss}",
          label: "毫秒(如111)",
        },
        {
          value: "{NO}",
          label: "序号(如0001)",
        },
        {
          value: "{no}",
          label: "序号(如1)",
        },
      ],
      separators: [
        {
          value: "-",
        },
        {
          value: "_",
        },
        {
          value: "/",
        },
        {
          value: "*",
        },
      ],
      tableData: [
        {
          id: 1,
          ruleType: "",
          separator: "",
        },
      ],
      currentRow: null,
      row: {},
      rules: {
        "model.name": [
          { required: true, message: "请输入名称", trigger: "change" },
        ],
        "model.code": [
          { required: true, message: "请输入编码", trigger: "change" },
        ],
        "model.rule": [
          { required: true, message: "请输入规则", trigger: "change" },
        ],
        "model.length": [
          { required: true, message: "请输入序号长度", trigger: "change" },
        ],
        "model.initValue": [
          { required: true, message: "请输入序号初始值", trigger: "change" },
        ],
        "model.step": [
          { required: true, message: "请输入序号步长", trigger: "change" },
        ],
        "model.resetType": [
          { required: true, message: "请选择生成方式", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    reAssignment() {},
    up() {
      let tid = this.row.id;
      if (tid != 1) {
        let a = this.tableData[tid - 1];
        this.tableData[tid - 1] = this.tableData[tid - 2];
        this.tableData[tid - 2] = a;
      }
      this.tableSort();
      this.onSelectChange();
    },
    down() {
      let tid = this.row.id;
      let length = this.tableData.length;
      if (tid != length) {
        let a = this.tableData[tid - 1];
        this.tableData[tid - 1] = this.tableData[tid];
        this.tableData[tid] = a;
      }
      this.tableSort();
      this.onSelectChange();
    },
    onSelectChange() {
      let rule = "";
      let length = this.tableData.length;
      _.each(this.tableData, (data, i) => {
        if (i != length - 1) {
          rule += data.ruleType + data.separator;
        } else {
          rule += data.ruleType;
        }
      });
      this.models.model.rule = rule;
    },
    //增加行
    addRow() {
      let id = this.tableData.length + 1;
      this.tableData.push({
        id: id,
        ruleType: "",
        separator: "",
      });
    },
    //删除
    remove() {
      let tid = this.row.id;
      let length = this.tableData.length;
      if (length != 1) {
        let idx = _.findIndex(this.tableData, (d) => {
          return d.id === tid;
        });
        this.tableData.splice(idx, 1);
        this.tableSort();
        this.onSelectChange();
      }
    },
    tableSort() {
      _.each(this.tableData, (d, i) => {
        d.id = i + 1;
      });
      this.timeStamp = new Date();
    },
    //选中
    pitchOn(row, column, event) {
      this.row = row;
    },
  },
};
</script>

<style scoped>
</style>